<template>
  <d2-container>
    <el-button @click="dialogVisible2 = true" type="warning">添加新店铺</el-button>
    <el-dialog title="添加新店铺" :visible.sync="dialogVisible2" width="30%">
      <span>
        <h2>基本信息</h2>
        <el-input placeholder="请输入内容" v-model="inshop.name" maxlength="10" show-word-limit>
          <template slot="prepend">商店名称</template>
        </el-input>
        <el-input placeholder="请输入内容" v-model="inshop.address">
          <template slot="prepend">商店地址</template>
        </el-input>
        <el-input placeholder="请输入内容" v-model="inshop.longitude" maxlength="10" show-word-limit>
          <template slot="prepend">商店经度</template>
        </el-input>
        <el-input placeholder="请输入内容" v-model="inshop.latitude" maxlength="10" show-word-limit>
          <template slot="prepend">商店纬度</template>
        </el-input>
        <el-input placeholder="请输入内容" v-model="inshop.photo">
          <template slot="prepend">商店图片url</template>
        </el-input>
        <h2>商店简介</h2>
        <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="inshop.introduction"/>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="kong()">重置</el-button>
        <el-button type="primary" @click="insertshop(inshop); dialogVisible2 = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-table :data="seeData" border height="90%">
      <el-table-column prop="id" label="店铺编号" width="50"/>
      <el-table-column label="店铺图片" width="120">
        <template slot-scope="props">
          <el-image style="width: 100px; height: 100px" :src="props.row.photo" fit="cover"/>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="店铺名称" width="180"/>
      <el-table-column prop="address" label="店铺地址" width="180"/>
      <el-table-column prop="longitude" label="经度" width="80"/>
      <el-table-column prop="latitude" label="纬度" width="80"/>
      <el-table-column prop="introduction" label="简介"/>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="getoneshop(scope.row.id)">编辑店铺</el-button>
          <el-dialog title="修改店铺信息" :visible.sync="dialogVisible" width="30%">
            <span>
              <h2>基本信息</h2>
              <el-input placeholder="请输入内容" v-model="upshop.name" maxlength="10" show-word-limit>
                <template slot="prepend">商店名称</template>
              </el-input>
              <el-input placeholder="请输入内容" v-model="upshop.address">
                <template slot="prepend">商店地址</template>
              </el-input>
              <el-input placeholder="请输入内容" v-model="upshop.longitude" maxlength="10" show-word-limit>
                <template slot="prepend">商店经度</template>
              </el-input>
              <el-input placeholder="请输入内容" v-model="upshop.latitude" maxlength="10" show-word-limit>
                <template slot="prepend">商店纬度</template>
              </el-input>
              <el-input placeholder="请输入内容" v-model="upshop.photo">
                <template slot="prepend">商店图片url</template>
              </el-input>
              <h2>商店简介</h2>
              <el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="upshop.introduction">
              </el-input>
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="getoneshop(upshop.id)">重置</el-button>
              <el-button type="primary" @click="updateshop(upshop); dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
          <p/>
          <el-button size="mini" @click="toShopMore(scope.row.id)" type="primary">商店详情</el-button>
          <p/>
          <el-button size="mini" type="danger" @click="opendel(scope.row.id)">删除店铺</el-button>
        </template>
      </el-table-column>
    </el-table>

    <template slot="footer">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="listQuery.page"
                     :page-sizes="[5, 10, 15, 30, 50, 100]"
                     :page-size="listQuery.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="listTotal"/>
    </template>
  </d2-container>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import { service, request } from '@/api/service'
export default {
  name: 'fyh_shop',
  data () {
    return {
      inshop: {
        id: undefined,
        name: undefined,
        address: undefined,
        longitude: undefined,
        latitude: undefined,
        photo: undefined,
        introduction: undefined,
        isdel: undefined
      },
      upshop: [],
      listTotal: undefined,
      listQuery: {
        page: 1,
        size: 5,
        id: undefined,
        create_time: undefined,
        state: undefined,
        address_id: undefined,
        user_id: undefined,
        remarks: undefined
      },
      tableData: [],
      seeData: [],
      dialogVisible: false,
      dialogVisible2: false,
    }
  },
  methods: {
    kong(){
      this.inshop.name = undefined;
      this.inshop.address = undefined;
      this.inshop.longitude = undefined;
      this.inshop.latitude = undefined;
      this.inshop.photo = undefined;
      this.inshop.introduction = undefined;
    },
    getAllShop () {
      request({
        url: 'shop/getallshop',
        method: 'get'
      }).then(res => {
        this.tableData = res.list
        this.listTotal = res.total
        this.seeData = this.tableData.slice(0, this.listQuery.size)
      })
    },
    handleSizeChange (val) {
      this.listQuery.size = val
      this.seeData = this.tableData.slice(0, this.listQuery.size)
    },
    handleCurrentChange (val) {
      this.listQuery.page = val
      this.seeData = this.tableData.slice((this.listQuery.page - 1) * this.listQuery.size, this.listQuery.page * this.listQuery.size)
    },
    toShopMore (i) {
      this.$router.push({
        name: 'fyh_shopmore',
        params: { sid: i }
      })
    },
    delshop(i){
      request({
        url: 'shop/delshop',
        method: 'get',
        params: {
          id: i
        }
      }).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.tableData = res.list
        this.listTotal = res.total
        this.seeData = this.tableData.slice(0, this.listQuery.size)
      })
    },
    opendel (i) {
      this.$confirm('此操作将永久删除该店铺, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delshop(i);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getoneshop(i){
      request({
        url: 'shop/getoneshop',
        method: 'get',
        params: {
          id: i
        }
      }).then(res => {
        this.upshop = res;
        this.dialogVisible = true; 
      })
    },
    updateshop(ini){
      request({
        url: 'shop/updateshop',
        method: 'put',
        data: {
          id: ini.id,
          name: ini.name,
          address: ini.address,
          longitude: ini.longitude,
          latitude: ini.latitude,
          photo: ini.photo,
          introduction: ini.introduction,
          isdel: ini.isdel
        }
      }).then(res => {
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        this.tableData = res.list
        this.listTotal = res.total
        this.seeData = this.tableData.slice(0, this.listQuery.size)
      })
    },
    insertshop(ini){
      request({
        url: 'shop/insertshop',
        method: 'put',
        data: {
          id: ini.id,
          name: ini.name,
          address: ini.address,
          longitude: ini.longitude,
          latitude: ini.latitude,
          photo: ini.photo,
          introduction: ini.introduction,
          isdel: ini.isdel
        }
      }).then(res => {
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
        this.tableData = res.list
        this.listTotal = res.total
        this.seeData = this.tableData.slice(0, this.listQuery.size)
      })
    }
  },
  created (id) {
    this.getAllShop()
  }
}
</script>
